
// 点击上箭头 图标更换 筛选框隐藏

document.querySelector('#shang').addEventListener('click', function () {

    // console.log(1);
    const title = document.querySelector('.sousuo')

    // console.log(title);

    title.classList.toggle('active-none')
})

// 发送请求 获取数据

//渲染数据到页面 和分页
const p = {
    sex: '',
    username: '',
    moblie: '',
    page: 1,
    limit: 10
}
render()

function render() {

    axios.get('/ydd_user/list', {
        params: p
    }).then(({ data: { data } }) => {
        // console.log(data)
        const tbody = document.querySelector('.a')
        tbody.innerHTML = data.data.map(function (item, index) {
            return `
            
            <tr>
              <td>${index + 1}</td>
              <td>${item.id}</td>
              <td>${item.username}</td>
              <td>${item.mobile}</td>
              <td>
              <img src="http://124.223.14.236:8060/${item.icon}" alt="">
              
              </td>
              <td>${item.sex === 0 ? '男' : '女'}</td>
              <td>${item.birthday}</td>
              <td>
                <i class="iconfont icon-xiugai add_add" data-id="${item.id}"></i>
                <i class=" iconfont icon-shanchu1 remove_remove" data-id="${item.id}"></i>
              </td>
            </tr>
            
          
            `
        }).join('')
        //分页器
        renderPage(data.count)
       
    })
}


const laypage = layui.laypage

// //? ======分页功能

function renderPage(total) {
    //执行一个laypage实例
    laypage.render({
        elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
        count: total, //数据总数，从服务端得到
        limit: p.limit, //每页显示的条数
        limits: [10, 20, 30, 50, 80], //每页条数的选择项
        layout: ['count', 'prev', 'limit', 'page', 'next', 'skip', 'refresh'], //自定义排版
        curr: p.page,
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            //完成分页效果  发ajax请求

            //修改query 对象 pagenum pagesize的值
            p.page = obj.curr
            p.limit = obj.limit


            //首次不执行
            if (!first) {
                //if 成立 说明first的值 是undefined ,是点击分页切换触发的jump
                render()
            }
        }
    })
}



//修改 用户功能

// layui生成的表单
const form = layui.form
const layer = layui.layer
let addForm
let a = `
<form  id="addForm" class="layui-form" lay-filter="formTest" >
  <!-- 第一行 用户名 -->
  <div class="layui-form-item">
    <label class="layui-form-label">* 用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名名称" autocomplete="off"
        class="layui-input">
    </div>
  </div>

  <!-- 第二行 手机号  -->
  <div class="layui-form-item">
    <label class="layui-form-label">* 手机号</label>
    <div class="layui-input-inline">
      <input type="text" name="mobile" required lay-verify="required" placeholder="请输入手机号"  autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <!-- 第三行 密码  -->
  <div class="layui-form-item">
    <label class="layui-form-label">* 密码</label>
    <div class="layui-input-inline">
      <input type="text" name="password" id="editipt" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
        class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">* 性别</label>
    <div class="layui-input-inline">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">用户头像</label>
    <div class="layui-input-block">
      <button type="button" id="btnChooseImage" name="icon" class="layui-btn editbtn     layui-btn-radius layui-btn-normal">
        <i class="layui-icon">&#xe67c;</i>
        点击上传</button>
      <input type="file" id="editfile" style="display: none;" />
    </div>
  </div>

  <!-- 第三行 按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn " lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary ">重置</button>
    </div>
  </div>
</form>

`

// 编辑功能
// $('body').on('click', '.add_add', async function () {
//     // console.log(1)

//     const id = $(this).data('id')
//     //    console.log(id)

//     const { data: { data } } = await axios.get(`/ydd_user/rowInfo?id=${id}`)
//     console.log(data)


//     addForm = layer.open({
//         type: 1,
//         content: a,
//         title: '编辑用户',
//         area: ['550px', '500px']

//     })


//     document.querySelector('#editipt').placeholder=data.password
   


//     let src 

//    // 图片选择
//     document.querySelector('body').addEventListener('click',async function(e){
        
//         if (e.target.classList.contains('editbtn')){

//             document.querySelector('#editfile').click()
//             console.log(document.querySelector('input#editfile'));
        
    
        

//             document.querySelector('#addForm').addEventListener('change',async ()=>{
                
//                 const file=document.querySelector('input#editfile').files[0]
//                 const fd = new FormData()
//                 fd.append('file',file)
//                 const res = await axios.post('/common/upload?type=images',fd,{
//                     headers:{
//                         'Content-Type':'multipart/form-data'
//                     }
//                 })

//             src = res.data.data.savePath
       
//             })

//         }

//     })
//     form.val('formTest', data)
//     console.log(111);

//     $('body').on('submit', '#addForm', async function (e) {
// console.log(222);
//         e.preventDefault()

       
//         const data = $(this).serialize()

//         // console.log(data)
//         const arr = data.split('&')
//         const obj = {}


//         arr.map(item => {

//             // console.log(item.split('='))
//             obj[item.split('=')[0]] = item.split('=')[1]
//         })

//         for (let k in obj) {

//             obj[k] = decodeURIComponent(obj[k])
//         }
//         // console.log(obj);
//         // console.log(src);

//         if(!src)  src=''
//         await axios.post('/ydd_user/update', {
//             mobile: `${obj.mobile}`,
//             username: `${obj.username}`,
//             sex: `${obj.sex}`,
//             password: `${obj.password}`,
//             icon: src,
//             id: id
//         })

//         //关闭弹出层
//         layer.close(addForm)
//         layer.msg('修改成功')
//         //刷新页面
//         render()
//     })

// })






























// !!-----------------------------------------------------------------------------------


$('body').on('click', '.add_add', async function () {
    // console.log(1)

    const id = $(this).data('id')
    //    console.log(id)

    const { data: { data } } = await axios.get(`/ydd_user/rowInfo?id=${id}`)
    console.log(data)


    addForm = layer.open({
        type: 1,
        content: a,
        title: '编辑用户',
        area: ['550px', '500px']

    })

    form.val('formTest', data)
    document.querySelector('#editipt').placeholder='密码不给看'
   


    let src 

    document.querySelector('#addForm').addEventListener('change',async ()=>{
                
        const file=document.querySelector('input#editfile').files[0]
        const fd = new FormData()
        fd.append('file',file)
        const res = await axios.post('/common/upload?type=images',fd,{
            headers:{
                'Content-Type':'multipart/form-data'
            }
        })

    src = res.data.data.savePath

    })


   // 图片选择
    // document.querySelector('body').addEventListener('click',async function(e){
    document.querySelector('#btnChooseImage').addEventListener('click',function(e){
        
        // if (e.target.classList.contains('editbtn'))   document.querySelector('#editfile').click()
         document.querySelector('#editfile').click()
           
           
    })



   


// $('body').on('submit', '#addForm', async function (e) {
$('#addForm').on('submit', async function (e) {
        e.preventDefault()
        const data = $(this).serialize()
        const arr = data.split('&')
        const obj = {}


        arr.map(item => {

            // console.log(item.split('='))
            obj[item.split('=')[0]] = item.split('=')[1]
        })

        for (let k in obj) {

            obj[k] = decodeURIComponent(obj[k])
        }
        console.log(obj);
        console.log(src);

        if(!src)  src=data.icon



        await axios.post('/ydd_user/update', {
            mobile: `${obj.mobile}`,
            username: `${obj.username}`,
            sex: `${obj.sex}`,
            password: `${obj.password}`,
            // icon: src,
            icon: src,
            id: id
        })

        //关闭弹出层
        layer.close(addForm)
        layer.msg('修改成功')
        //刷新页面
        render()
    })

})






// !!-----------------------------------------------------------------------------------

















//原生的编辑修改功能
// document.querySelector('body').onclick = async function (e) {


//     //获取到id
//     let id
//     if (e.target.classList.contains('add_add')) {
//         // console.log(1)
//         id = e.target.dataset.id

//         // 发ajax请求 拿到数据填充到表格中

//         const { data: { data } } = await axios.get(`/ydd_user/rowInfo?id=${id}`)

//         //    console.log(data)

//         //弹出层
//         addForm = layer.open({
//             type: 1,
//             content: a,
//             title: '编辑用户',
//             area: ['550px', '500px']

//         })
//         form.val('formTest', data)



//     }


//     //确认修改 编辑功能

//     document.querySelector('body').addEventListener('submit', async function (e) {


//         if (e.target.tagName === 'FORM') {


//             //阻止默认行为
//             e.preventDefault()



//             const data = form.val('formTest')

//             // console.log(data)

//             await axios.post('/ydd_user/update', {
//                 mobile: `${data.mobile}`,
//                 username: `${data.username}`,
//                 sex: `${data.sex}`,
//                 password: `${data.password}`,
//                 icon: '',
//                 id: id
//             })

//             //关闭弹出层
//             layer.close(addForm)
//             layer.msg('修改成功')
//             //刷新页面
//             render()
//         }



//     })

// }



//图片选择
// document.querySelector('body').addEventListener('click',function(e){

//     if (e.target.tagName === 'BUTTON'){

//         document.querySelector('#file').click()
//     }

// })




//添加=功能




//添加功能
let b = `
<form class="layui-form bddForm" lay-filter="formTest_add" >
  <!-- 第一行 用户名 -->
  <div class="layui-form-item">
    <label class="layui-form-label">* 用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名名称" autocomplete="off"
        class="layui-input">
    </div>
  </div>

  <!-- 第二行 手机号  -->
  <div class="layui-form-item">
    <label class="layui-form-label">* 手机号</label>
    <div class="layui-input-inline">
      <input type="text" name="mobile" required lay-verify="required" placeholder="请输入手机号" autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <!-- 第三行 密码  -->
  <div class="layui-form-item">
    <label class="layui-form-label">* 密码</label>
    <div class="layui-input-inline">
      <input type="text" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
        class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">* 性别</label>
    <div class="layui-input-inline">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">用户头像</label>
    <div class="layui-input-block">
      <button type="button" id="btnChooseImage" name="icon" class="layui-btn addbtn layui-btn-radius layui-btn-normal">
        <i class="layui-icon">&#xe67c;</i>
        点击上传</button>
      <input type="file" id="addfile" style="display: none;" />
    </div>
  </div>

  <!-- 第三行 按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary reset">重置</button>
    </div>
  </div>
</form>

`
let addForm_a
document.querySelector('.add-a').onclick = function () {

   
    //弹出层
    addForm_a = layer.open({
        type: 1,
        content: b,
        title: '添加用户',
        area: ['550px', '500px']

    })


    // form.render()

   
        document.querySelector('.reset').click()
    

    document.querySelector('body').addEventListener('click', async function (e) {
     
        if (e.target.classList.contains('addbtn')) {
            console.log(e.target)
            e.preventDefault()

            // !!!!!

            document.querySelector('#addfile').click()
            // console.log(document.querySelector('input#addfile'));


            let src

            document.querySelector('#addfile').addEventListener('change',async ()=>{
                // console.log(111111);
                const file=document.querySelector('input#addfile').files[0]
                const fd = new FormData()
                fd.append('file',file)
                const res = await axios.post('/common/upload?type=images',fd,{
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                })

                src = res.data.data.savePath
                console.log(res);
                console.log(src);
            })


            //!!!

            

            $('body').on('submit', '.bddForm', async function (e) {
                e.preventDefault()
                
                const data = form.val('formTest_add')

                if(!src) src=''
                // console.log(document.querySelector('#file').files[0]); 
    
                await axios.post('/ydd_user/add', {
                    icon: src,
                    mobile: `${data.mobile}`,
                    password: `${data.password}`,
                    sex: `${data.sex}`,
                    username: `${data.username}`
                })
    
    
                //关闭弹出层
                layer.close(addForm_a)
                layer.msg('添加成功')
                //刷新页面
                render()
            })




           
        }

    })
}



//删除功能

//获取到id

document.querySelector('body').onclick = function (e) {

    let id
    if (e.target.classList.contains('remove_remove')) {
        // console.log(1)
        id = e.target.dataset.id

        //发ajax请求

        axios.get('/ydd_user/del', {
            params: {
                id
            }
        })
        layer.msg('删除成功')
        render()
    }
}


//筛选功能


    //给表单注册事件

    $('.sousuo').on('submit',function(e){

        //阻止默认行为
        e.preventDefault()

       

            p.username = $('#username').val().trim()
            p.moblie = $('#mobile').val().trim()
            p.sex = $('#sex').val().trim()
    
            p.page = 1
           
            render()
      

       
       
    })

    // $('#shuaxin').click(()=>{
    //     console.log(1);
     
    // })

   

    
//刷新
window.onclick = function(event) {
    if (event.target.matches('#shuaxin')) {

        location.reload()
    }
    }
   










